<template>
  <view class="merchant-reviews-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">评价管理</text>
      </view>
    </view>

    <!-- 评价统计卡片 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-value">{{ statistics.averageRating || '0.0' }}</text>
        <text class="stat-label">平均评分</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ statistics.totalReviews || 0 }}</text>
        <text class="stat-label">总评价数</text>
      </view>
      <view class="stat-item highlight">
        <text class="stat-value">{{ statistics.pendingReplyCount || 0 }}</text>
        <text class="stat-label">待回复</text>
      </view>
    </view>

    <!-- 评分分布 -->
    <view class="rating-distribution" v-if="statistics.ratingDistribution">
      <text class="section-title">评分分布</text>
      <view class="distribution-bars">
        <view 
          class="bar-item" 
          v-for="star in [5, 4, 3, 2, 1]" 
          :key="star"
          @click="setRatingFilter(star)"
        >
          <text class="star-label">{{ star }}星</text>
          <view class="bar-wrapper">
            <view 
              class="bar-fill" 
              :style="{ width: getRatingPercentage(star) + '%' }"
            ></view>
          </view>
          <text class="star-count">{{ statistics.ratingDistribution[star] || 0 }}</text>
        </view>
      </view>
    </view>

    <!-- 筛选器 -->
    <view class="filters">
      <view 
        class="filter-btn" 
        :class="{ active: filters.rating === null }"
        @click="setRatingFilter(null)"
      >全部</view>
      <view 
        class="filter-btn" 
        :class="{ active: filters.rating === 5 }"
        @click="setRatingFilter(5)"
      >好评</view>
      <view 
        class="filter-btn" 
        :class="{ active: filters.hasReply === false }"
        @click="toggleReplyFilter"
      >未回复</view>
      <view 
        class="filter-btn" 
        :class="{ active: filters.hasImage === true }"
        @click="toggleImageFilter"
      >有图</view>
    </view>

    <!-- 评价列表 -->
    <view class="reviews-list">
      <view 
        class="review-card" 
        v-for="review in reviews" 
        :key="review.id"
      >
        <!-- 用户信息 -->
        <view class="review-header">
          <view class="user-info">
            <image 
              v-if="review.userAvatar && !review.isAnonymous" 
              :src="review.userAvatar" 
              class="user-avatar"
              mode="aspectFill"
            />
            <view v-else class="user-avatar-placeholder">
              <text class="avatar-text">{{ review.isAnonymous ? '匿' : (review.username ? review.username[0] : 'U') }}</text>
            </view>
            <view class="user-details">
              <text class="username">{{ review.isAnonymous ? '匿名用户' : review.username }}</text>
              <text class="review-time">{{ formatTime(review.createdAt) }}</text>
            </view>
          </view>
        </view>

        <!-- 评分 -->
        <view class="ratings">
          <view class="rating-item">
            <text class="rating-label">综合</text>
            <StarRating :value="review.overallRating" :readonly="true" :size="24" />
          </view>
          <view class="rating-item" v-if="review.tasteRating">
            <text class="rating-label">口味</text>
            <StarRating :value="review.tasteRating" :readonly="true" :size="24" />
          </view>
          <view class="rating-item" v-if="review.speedRating">
            <text class="rating-label">速度</text>
            <StarRating :value="review.speedRating" :readonly="true" :size="24" />
          </view>
          <view class="rating-item" v-if="review.packageRating">
            <text class="rating-label">包装</text>
            <StarRating :value="review.packageRating" :readonly="true" :size="24" />
          </view>
        </view>

        <!-- 评价内容 -->
        <text class="review-content" v-if="review.content">{{ review.content }}</text>

        <!-- 评价标签 -->
        <view class="review-tags" v-if="review.tags && review.tags.length > 0">
          <text 
            class="tag" 
            v-for="(tag, index) in review.tags" 
            :key="index"
          >{{ tag }}</text>
        </view>

        <!-- 评价图片 -->
        <view class="review-images" v-if="review.images && review.images.length > 0">
          <image 
            v-for="(img, index) in review.images" 
            :key="index"
            :src="img" 
            class="review-img"
            mode="aspectFill"
            @click="previewImage(review.images, index)"
          />
        </view>

        <!-- 商家回复 -->
        <view class="merchant-reply" v-if="review.merchantReply">
          <view class="reply-header">
            <text class="reply-label">商家回复：</text>
            <text class="reply-time">{{ formatTime(review.merchantReplyAt) }}</text>
          </view>
          <text class="reply-content">{{ review.merchantReply }}</text>
        </view>

        <!-- 回复按钮 -->
        <view class="review-actions" v-if="!review.merchantReply">
          <button class="reply-btn" @click="showReplyModal(review)">回复评价</button>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="reviews.length === 0 && !loading">
        <text class="empty-icon">💬</text>
        <text class="empty-text">{{ getEmptyText() }}</text>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore && !loading">
        <button class="load-more-btn" @click="loadMore">加载更多</button>
      </view>

      <!-- 加载中 -->
      <view class="loading" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>
    </view>

    <!-- 回复弹窗 -->
    <view class="reply-modal" v-if="showReplyForm" @click="closeReplyModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">回复评价</text>
          <text class="modal-close" @click="closeReplyModal">✕</text>
        </view>
        
        <view class="modal-body">
          <!-- 显示原评价 -->
          <view class="original-review">
            <view class="review-user">
              <text class="username">{{ currentReview.isAnonymous ? '匿名用户' : currentReview.username }}</text>
              <StarRating :value="currentReview.overallRating" :readonly="true" :size="20" />
            </view>
            <text class="review-text" v-if="currentReview.content">{{ currentReview.content }}</text>
          </view>

          <!-- 回复输入框 -->
          <textarea 
            v-model="replyContent" 
            class="reply-textarea"
            placeholder="输入您的回复（感谢用户的反馈，展示商家的专业态度）"
            :maxlength="500"
          ></textarea>
          <text class="char-count">{{ replyContent.length }}/500</text>

          <!-- 快捷回复 -->
          <view class="quick-replies">
            <text class="quick-label">快捷回复：</text>
            <text 
              class="quick-item" 
              v-for="(item, index) in quickReplies" 
              :key="index"
              @click="useQuickReply(item)"
            >{{ item }}</text>
          </view>
        </view>

        <view class="modal-footer">
          <button class="cancel-btn" @click="closeReplyModal">取消</button>
          <button class="confirm-btn" @click="submitReply">提交回复</button>
        </view>
      </view>
    </view>

    <!-- 自定义弹窗 -->
    <CustomModal ref="customModal" />
  </view>
</template>

<script>
import merchantService from '../../../services/merchant.js'
import { backToMerchantHome } from '../../../utils/navigation.js'
import StarRating from '../../../components/StarRating.vue'
import CustomModal from '../../../components/CustomModal.vue'

export default {
  components: {
    StarRating,
    CustomModal
  },
  data() {
    return {
      statusBarHeight: 0,
      loading: false,
      
      // 评价列表
      reviews: [],
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
      
      // 筛选条件
      filters: {
        rating: null,      // 评分筛选
        hasReply: null,    // 是否有回复
        hasImage: null     // 是否有图片
      },
      
      // 统计数据
      statistics: {
        totalReviews: 0,
        averageRating: 0,
        ratingDistribution: {},
        pendingReplyCount: 0
      },
      
      // 回复相关
      showReplyForm: false,
      currentReview: {},
      replyContent: '',
      
      // 快捷回复
      quickReplies: [
        '感谢您的好评，我们会继续努力！',
        '非常感谢您的支持，期待再次为您服务！',
        '感谢您的反馈，我们会不断改进！',
        '谢谢您的认可，欢迎下次光临！'
      ]
    }
  },
  
  onLoad() {
    this.getStatusBarHeight()
    this.loadStatistics()
    this.loadReviews()
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.currentPage = 1
    this.reviews = []
    this.hasMore = true
    this.loadStatistics()
    this.loadReviews().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
      document.documentElement.style.setProperty('--status-bar-height', this.statusBarHeight + 'px')
    },
    
    // 加载评价统计
    async loadStatistics() {
      try {
        const res = await merchantService.getReviewStatistics()
        this.statistics = res.data
      } catch (error) {
        console.error('加载统计失败:', error)
      }
    },
    
    // 加载评价列表
    async loadReviews() {
      if (this.loading) return
      
      try {
        this.loading = true
        
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        
        // 添加筛选条件
        if (this.filters.rating !== null) {
          params.rating = this.filters.rating
        }
        if (this.filters.hasReply !== null) {
          params.hasReply = this.filters.hasReply
        }
        if (this.filters.hasImage !== null) {
          params.hasImage = this.filters.hasImage
        }
        
        const res = await merchantService.getReviews(params)
        
        if (this.currentPage === 1) {
          this.reviews = res.data.items || []
        } else {
          this.reviews = [...this.reviews, ...(res.data.items || [])]
        }
        
        // 更新待回复数量
        if (res.data.pendingReplyCount !== undefined) {
          this.statistics.pendingReplyCount = res.data.pendingReplyCount
        }
        
        // 判断是否还有更多
        this.hasMore = (res.data.items || []).length >= this.pageSize
        
      } catch (error) {
        console.error('加载评价失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 加载更多
    loadMore() {
      if (!this.hasMore || this.loading) return
      this.currentPage++
      this.loadReviews()
    },
    
    // 设置评分筛选
    setRatingFilter(rating) {
      if (this.filters.rating === rating) {
        this.filters.rating = null
      } else {
        this.filters.rating = rating
      }
      this.resetAndReload()
    },
    
    // 切换回复筛选
    toggleReplyFilter() {
      if (this.filters.hasReply === false) {
        this.filters.hasReply = null
      } else {
        this.filters.hasReply = false
      }
      this.resetAndReload()
    },
    
    // 切换图片筛选
    toggleImageFilter() {
      if (this.filters.hasImage === true) {
        this.filters.hasImage = null
      } else {
        this.filters.hasImage = true
      }
      this.resetAndReload()
    },
    
    // 重置并重新加载
    resetAndReload() {
      this.currentPage = 1
      this.reviews = []
      this.hasMore = true
      this.loadReviews()
    },
    
    // 获取评分百分比
    getRatingPercentage(star) {
      if (!this.statistics.ratingDistribution || !this.statistics.totalReviews) {
        return 0
      }
      const count = this.statistics.ratingDistribution[star] || 0
      return (count / this.statistics.totalReviews) * 100
    },
    
    // 显示回复弹窗
    showReplyModal(review) {
      this.currentReview = review
      this.replyContent = ''
      this.showReplyForm = true
    },
    
    // 关闭回复弹窗
    closeReplyModal() {
      this.showReplyForm = false
      this.currentReview = {}
      this.replyContent = ''
    },
    
    // 使用快捷回复
    useQuickReply(text) {
      this.replyContent = text
    },
    
    // 提交回复
    async submitReply() {
      if (!this.replyContent.trim()) {
        uni.showToast({
          title: '请输入回复内容',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({ title: '提交中...' })
        
        await merchantService.replyReview(this.currentReview.id, this.replyContent)
        
        uni.hideLoading()
        uni.showToast({
          title: '回复成功',
          icon: 'success'
        })
        
        // 更新列表中的评价
        const index = this.reviews.findIndex(r => r.id === this.currentReview.id)
        if (index !== -1) {
          this.reviews[index].merchantReply = this.replyContent
          this.reviews[index].merchantReplyAt = new Date().toISOString()
        }
        
        // 更新统计
        if (this.statistics.pendingReplyCount > 0) {
          this.statistics.pendingReplyCount--
        }
        
        this.closeReplyModal()
        
      } catch (error) {
        uni.hideLoading()
        console.error('回复失败:', error)
        uni.showToast({
          title: error.message || '回复失败',
          icon: 'none'
        })
      }
    },
    
    // 预览图片
    previewImage(images, index) {
      uni.previewImage({
        urls: images,
        current: index
      })
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      // 一分钟内
      if (diff < 60000) {
        return '刚刚'
      }
      // 一小时内
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      }
      // 一天内
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      }
      // 一周内
      if (diff < 604800000) {
        return Math.floor(diff / 86400000) + '天前'
      }
      
      // 超过一周，显示日期
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      
      if (year === now.getFullYear()) {
        return `${month}-${day}`
      }
      return `${year}-${month}-${day}`
    },
    
    // 获取空状态文本
    getEmptyText() {
      if (this.filters.rating !== null) {
        return `暂无${this.filters.rating}星评价`
      }
      if (this.filters.hasReply === false) {
        return '暂无待回复评价'
      }
      if (this.filters.hasImage === true) {
        return '暂无带图评价'
      }
      return '暂无评价'
    },
    
    // 返回
    goBack() {
      backToMerchantHome()
    }
  }
}
</script>

<style lang="scss" scoped>
.merchant-reviews-container {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 40rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  z-index: 999;
}

/* 顶部导航栏 */
.top-nav {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  height: 88rpx;
  background: #FFFFFF;
  border-bottom: 1rpx solid #EEEEEE;
  display: flex;
  align-items: center;
  z-index: 998;
}

.nav-left {
  position: absolute;
  left: 0;
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 36rpx;
  color: #333333;
}

.nav-center {
  flex: 1;
  text-align: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333333;
}

/* 统计卡片 */
.stats-card {
  margin-top: calc(var(--status-bar-height) + 88rpx + 20rpx);
  background: linear-gradient(135deg, #FF8A00 0%, #FFA726 100%);
  margin: calc(var(--status-bar-height) + 88rpx + 20rpx) 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 8rpx 20rpx rgba(255, 138, 0, 0.2);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  
  &.highlight {
    .stat-value {
      color: #FFD700;
    }
  }
}

.stat-value {
  font-size: 48rpx;
  font-weight: 700;
  color: #FFFFFF;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 评分分布 */
.rating-distribution {
  background: #FFFFFF;
  margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
  display: block;
}

.distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.star-label {
  font-size: 24rpx;
  color: #666666;
  width: 60rpx;
}

.bar-wrapper {
  flex: 1;
  height: 16rpx;
  background: #F0F0F0;
  border-radius: 8rpx;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF8A00 0%, #FFA726 100%);
  border-radius: 8rpx;
  transition: width 0.3s ease;
}

.star-count {
  font-size: 24rpx;
  color: #999999;
  width: 60rpx;
  text-align: right;
}

/* 筛选器 */
.filters {
  display: flex;
  gap: 16rpx;
  padding: 0 20rpx 20rpx;
  overflow-x: auto;
  white-space: nowrap;
  
  &::-webkit-scrollbar {
    display: none;
  }
}

.filter-btn {
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  background: #FFFFFF;
  border: 2rpx solid #E1E5E9;
  font-size: 24rpx;
  color: #666666;
  transition: all 0.3s ease;
  
  &.active {
    background: linear-gradient(135deg, #FF8A00 0%, #FFA726 100%);
    border-color: #FF8A00;
    color: #FFFFFF;
  }
}

/* 评价列表 */
.reviews-list {
  padding: 0 20rpx;
}

.review-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 用户信息 */
.review-header {
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-avatar-placeholder {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A00 0%, #FFA726 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: 600;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.username {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
}

.review-time {
  font-size: 22rpx;
  color: #999999;
}

/* 评分 */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.rating-label {
  font-size: 22rpx;
  color: #666666;
}

/* 评价内容 */
.review-content {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

/* 标签 */
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 20rpx;
}

.tag {
  padding: 8rpx 16rpx;
  background: #FFF7EC;
  border-radius: 8rpx;
  font-size: 22rpx;
  color: #FF8A00;
}

/* 图片 */
.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 20rpx;
}

.review-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

/* 商家回复 */
.merchant-reply {
  background: #F8F9FA;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.reply-label {
  font-size: 24rpx;
  font-weight: 600;
  color: #FF8A00;
}

.reply-time {
  font-size: 22rpx;
  color: #999999;
}

.reply-content {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  display: block;
}

/* 操作按钮 */
.review-actions {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #F0F0F0;
}

.reply-btn {
  width: 100%;
  height: 72rpx;
  background: linear-gradient(135deg, #FF8A00 0%, #FFA726 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 600;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 120rpx 0;
}

.empty-icon {
  font-size: 120rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  display: block;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 40rpx 0;
}

.load-more-btn {
  width: 300rpx;
  height: 72rpx;
  background: #FFFFFF;
  border: 2rpx solid #E1E5E9;
  border-radius: 36rpx;
  font-size: 26rpx;
  color: #666666;
}

.loading {
  text-align: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 26rpx;
  color: #999999;
}

/* 回复弹窗 */
.reply-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40rpx;
}

.modal-content {
  background: #FFFFFF;
  border-radius: 24rpx;
  width: 100%;
  max-width: 670rpx;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.modal-close {
  font-size: 40rpx;
  color: #999999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 30rpx;
}

.original-review {
  background: #F8F9FA;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 24rpx;
}

.review-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.review-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  display: block;
}

.reply-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #E1E5E9;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #333333;
  line-height: 1.6;
  resize: none;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: #999999;
  margin-top: 12rpx;
  margin-bottom: 24rpx;
}

.quick-replies {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.quick-label {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 8rpx;
  display: block;
}

.quick-item {
  padding: 16rpx 24rpx;
  background: #F8F9FA;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666666;
  border: 1rpx solid #E1E5E9;
  
  &:active {
    background: #FFF7EC;
    border-color: #FF8A00;
    color: #FF8A00;
  }
}

.modal-footer {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;
  border-top: 1rpx solid #F0F0F0;
}

.cancel-btn {
  flex: 1;
  height: 80rpx;
  background: #F0F0F0;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666666;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  background: linear-gradient(135deg, #FF8A00 0%, #FFA726 100%);
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 600;
}
</style>







